<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div style="width:100%" class="content">
        <div class="top">
           <span class="my-point-color" >我的{{fun.getIntegralLang()}}</span>
           <span class="detail" @click="toDetailList">明细<i class="iconfont icon-icon_more icon" style="transform: scale(0.7);display:inline-block"></i></span>
        </div>
        <div class="bottom">
          <div class="point">{{datas.credit1}}</div>
          <button class="point-detail" @click="toDetail">
                {{fun.getIntegralLang()}}详情
          </button>
        </div>
    </div>
  </div>
</template>

<script>
import emptyImage from '../../assets/images/new_diy/image.png';
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const { preview_color,my_point_color,detail_color,point_detail_color,point_detail_bg } = this.datas;

    return `
        .component-${this.id} .content{
                background-color: ${preview_color.color};
                background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
                background-size: 100% auto;
                background-position: center;
                height: 90px;
                border-radius: 10px;
                padding: 19px 15px
        }
        .component-${this.id} .content .top .my-point-color{
                font-size:14px;
                color:${my_point_color};
                font-weight:500
        }
        .component-${this.id} .content .top .detail{
                font-size:14px;
                color:${detail_color};
                margin-left:4px
        }
        .component-${this.id} .content .top .detail .icon{
                font-size:10px;
                color:${detail_color};
        }
        .component-${this.id} .content .bottom .point{
                font-size:25px;
                color:${my_point_color};
                font-weight: bold;
        }
        .component-${this.id} .content .bottom .point-detail{
               padding:6px 12px;
               border-radius:25px;
               background-color: ${point_detail_bg};
               margin-top:4px;
               border:0;
               line-height:16px;
               color:${point_detail_color}
        }
    `;
  }
};

export default {
  data() {
    return {
      emptyImage,
    };
  },
  props: ["id", "datas", "styles", "languages"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  methods: {
    toDetail(){
      this.$router.push(this.fun.getUrl("integral_v2"));
    },
    toDetailList(){
      this.$router.push(this.fun.getUrl("integrallist"));
    }
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
// 默认
.component-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 5px 12px;
}
.content .bottom{
  display: flex;
  justify-content:space-between;
  margin-top: 8px;
  align-content: center;
}
.top{
  text-align: start;
}
</style>